// 视图组件
import HomeView from "../views/HomeView.js"
import ListView from "../views/ListView.js"
import CarView from "../views/CarView.js"
import MineView from "../views/MineView.js"
import NotFindView from "../views/NotFoundView.js"

// 将 路由路径 和 视图 相互关联的一个映射 (数组)
let routes = [{
    path: "/home", // 路径
    component: HomeView,  //视图(组件) 配置对象 (组件配置和组件名)
}, {
    path: "/list", // 路径
    component: ListView,  //视图(组件) 配置对象 (组件配置和组件名)
}, {
    path: "/car", // 路径
    component: CarView,  //视图(组件) 配置对象 (组件配置和组件名)
}, {
    path: "/mine", // 路径
    component: MineView,  //视图(组件) 配置对象 (组件配置和组件名)
}, {
    path: "*", // 匹配除上述路由配置以外的所有路由 
    component: NotFindView,  //视图(组件) 配置对象 (组件配置和组件名)
}]


/*  var obj = {a:1,b:2,c:3,d:4};
 // 一一对应  
 // var {a,b,c,d} = obj;  // 对应键名解构

 var {a,...data} = obj;  // Rest参数 => 将剩余参数整合到对象中
 // a => a   ...data =>  b:2,c:3,d:4 */



/* 将routes中的组件 注册到根组件 */
function parseRoute(routes) {
    let obj = {};
    routes.forEach(route => {
        let component = route.component;
        let { name, ...conponentOption } = component;
        obj[name] = conponentOption;
    })
    return obj;
}

console.log(parseRoute(routes));  // 解析得到组件名和它对应的配置项

export {routes,parseRoute};  //官方更加简单